<template>
  <div>
    <el-form :model="localUser" ref="userForm" label-width="100px">
      <el-form-item label="用户名">
        <el-input v-model="localUser.userName" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="localUser.email" />
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model="localUser.phone" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="localUser.roleId" placeholder="请选择角色">
          <el-option label="超级管理员" value="0"></el-option>
          <el-option label="管理员" value="1"></el-option>
          <el-option label="创作者" value="2"></el-option>
          <el-option label="用户" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="text-align: right;">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="$emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditUser',
  props: {
    user: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      localUser: { ...this.user }, // 创建一个本地副本以避免直接修改prop
    };
  },
  watch: {
    user(newVal) {
      this.localUser = { ...newVal }; // 更新本地副本当prop变化时
    },
  },
  methods: {
    submit() {
      this.$emit('submit', this.localUser);
    },
  },
};
</script>

<style scoped>
.el-form {
  max-width: 400px;
}
</style>